<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>高阶函数_函数柯里化</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			/* 
					关于高阶函数和函数的柯里化
							1.高阶函数：若果一个函数符合下列两个条件中的任何一个，那么就是高阶函数
									(1).若A函数，接收一个函数作为参数，那么A就是可以称之为：高阶函数。
									(2).若A函数，返回值是一个函数，那么A就是可以称之为：高阶函数。
									常见的高阶函数：Promise、setTimeout、arr.map(()=>{})、bind等等。
							2.柯里化：通过函数调用依然返回函数的方式，实现多次接收参数，最后统一处理的函数编码形式，就叫做函数的柯里化。
									function add(a){
										return function (b){
											return a + b
										}
									}
			*/
			//何为受控：所有输入类的元素，随着用户的输入，数据“自动”维护到state中
			//定义组件
			class Login extends React.Component{
				//初始化state
				state = {username:'',password:''}
				render(){
					return (
						<form onSubmit={this.handlerSubmit}>
							用户名：<input onChange={this.saveUserData('username')} type="text"/>
							密码：<input onChange={this.saveUserData('password')} type="password"/>
							<button>登录</button>
						</form>
					)
				}
				saveUserData = (key)=>{
					return (event)=>{
						this.setState({[key]:event.target.value})
					}
				}
				
				//点击登录按钮的回调
				handlerSubmit = (event)=>{
					event.preventDefault()//阻止表单提交
					const {username,password} = this.state
					alert(`用户名：${username},密码：${password}`)
				}
			}
			//渲染组件
			ReactDOM.render(<Login/>,document.getElementById('root'))
		</script>
	</body>
</html>